<template>
  <div class="header">
    <header ref="header">
      <div
        class="header-item"
        @click="back"
      ><i :class="['icon','iconfont', iconnameleft]"></i></div>
      <div class="header-item"><span>{{title}}</span></div>
      <div class="header-item"  @click="$store.commit(vuexclick)"><i :class="['icon','iconfont', iconnameright]"></i></div>
    </header>
  </div>
</template>
<script>
export default {
  props: {
    isback: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ""
    },
    iconnameright: {
      type: String,
      default: "icon-left"
    },
    iconnameleft: {
      type: String,
      default: "icon-left"
    },
    backgroundColor: {
      type: String,
      default: ""
    },
    vuexclick:{
      type:String,
      default:'',
    }
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    // rightClick() {
    //   console.log(this.vuexclick);
    //   return;
    //   this.$store.commit(this.vuexclick)
    // }
  },
  mounted() {
    this.$refs.header.style.backgroundColor = this.backgroundColor;
  }
};
</script>

<style lang="scss">
.header {
  min-width: 320px;
  max-width: 640px;

  height: 45px;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  header {
    padding: 0 20px;
    width: 100%;
    height: 100%;
    color: #fff;
    // background: linear-gradient(
    //   135deg,
    //   rgb(129, 255, 239) 10%,
    //   rgb(240, 103, 180) 100%
    // );
    // background-image: linear-gradient(
    //   135deg,
    //   rgb(226, 176, 255) 10%,
    //   rgb(159, 68, 211) 100%
    // );
    background-color: #fff;

    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
    a {
      display: block;
      width: 25%;
      height: 100%;

      .footer-item {
        width: 100%;
        height: 100%;
        display: flex;
        display: -webkit-flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }
    }
  }
}
</style>

